<!--
 * @Author       : Sayolit
 * @Date         : 2023-03-21 16:00:09
 * @LastEditors  : Sayolit
 * @LastEditTime : 2023-04-15 17:35:52
 * @FilePath     : 404.vue
 * @Description  : 
 * Copyright 2023 Sayolit, All Rights Reserved. 
 * 2023-03-21 16:00:09
-->
<script setup>
	import { ref, reactive, computed } from 'vue'
	import { useRouter } from 'vue-router'

	const router = useRouter()
	const seconds = ref(3)
	onMounted(() => {
		const timer = setInterval(() => {
			if (seconds.value-- == 1) {
				clearInterval(timer)
				router.push('/')
			}
		}, 1000)
	})
</script>
<template>
	<div class="main-404">
		<div class="error-text">
			<div>Error!</div>
			<div>Please check your code!</div>
			<div>
				It will jump automatically in
				<span>{{ seconds }}</span>
				seconds
			</div>
		</div>
	</div>
</template>

<style scoped lang="less">
	.main-404 {
		width: 100vw;
		height: 100vh;
		display: flex;
		align-items: flex-start;
		justify-content: center;
		background-color: rgb(82, 169, 223);

		.error-text {
			margin-top: 4%;
			width: 700px;
			height: 220px;
			display: flex;
			justify-content: center;
			flex-direction: column;
			font-family: 'Palanquin Dark', sans-serif;
			font-size: 4em;
			color: white;

			div {
				width: 100%;
				justify-content: flex-start;
				align-items: center;
				height: 100px;
			}

			span {
				font-size: 5.5rem;
				color: rgb(240, 215, 52);
			}
		}
	}
</style>
